<template>
  <!-- 这里是医生排台 -->
  <div class="panel panel-primary">
    <TypeSelection :data="[{name:'今天',id:undefined},{name:'明天',id:1},{name:'后天',id:2}]" />
    <div class="date">选择日期</div>
    <el-date-picker v-model="value1" type="date" placeholder="请选择" />
    <el-table :data="tableData" :span-method="spanMethod" style="width: 100%;">
      <el-table-column v-for="(item, i) of tableHeader" :key="i" :label="item" :prop="item" align="center" />
    </el-table>
  </div>
</template>

<script>
import { connected } from 'process';
import { TypeSelection } from '@monkey.do/monkey';
export default {
  name: 'Hello',
  components: {
    TypeSelection,
  },
  data() {
    return {
      value1: '',
      tableHeader: [],
      tableData: [],
      mergeConfig: {
        position: 0,
        rowsArr: [],
        colsArr: [],
        colsRange: [1, 9],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    searchChange(e) { // 是否已经咨询的方法函数
      console.log(e);
    },
    init() {
      this.getData();
      // 挂载函数
      this.getRowsArr(this.tableData);
      this.getColsArr(this.tableData);
    },
    getData() {
      const title = ['时间', '医生1', '医生2', '医生3', '医生4', '医生5', '医生6', '医生7', '医生8'];
      this.tableHeader = title;
      const data = [
        ['8:00', '1', '1', '30', '40', '50', '60', '70', '80'],
        ['9:00', '1', '1', '30', '41', '50', '61', '70', '80'],
        ['10:00', '1', '22', '30', '41', '51', '61', '70', '80'],
        ['11:00', '1', '22', '31', '41', '52', '61', '70', '80'],
        ['12:00', '1', '22', '32', '42', '52', '61', '71', '80'],
        ['13:00', '2', '23', '33', '43', '52', '62', '71', '80'],
        ['14:00', '2', '24', '33', '44', '52', '63', '71', '80'],
        ['15:00', '2', '24', '33', '44', '53', '63', '72', '80'],
        ['16:00', '2', '25', '33', '45', '54', '63', '73', '80'],
        ['17:00', '2', '26', '33', '46', '55', '63', '74', '81'],
        ['18:00', '2', '27', '34', '47', '56', '63', '75', '82'],
        ['19:00', '3', '28', '35', '47', '56', '63', '76', '83'],
        ['20:00', '4', '28', '35', '47', '56', '64', '76', '84'],
        ['21:00', '5', '28', '35', '48', '57', '65', '76', '85'],
        ['22:00', '6', '28', '35', '49', '58', '66', '77', '86'],
        ['23:00', '6', '28', '35', '49', '59', '67', '79', '86'],
      ];
      let obj = new Object();
      data.forEach((item, index) => {
        item.forEach((_item, _index) => {
          obj[title[_index]] = _item;
        });
        this.tableData.push(obj);
        // 清空对象
        obj = new Object();
      });
    },
    // 处理纵向数据
    getRowsArr(data) {
      let spanArr = [];
      for (const prop in data[0]) {
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1);
            this.mergeConfig.position = 0;
          } else {
            if (data[i - 1][prop] === data[i][prop]) {
              spanArr.push(0);
              spanArr[this.mergeConfig.position] += 1;
            } else {
              spanArr.push(1);
              this.mergeConfig.position = i;
            }
          }
        }
        this.mergeConfig.rowsArr.push(spanArr);
        spanArr = [];
      }
    },
    // 处理横向数据
    getColsArr(data) {
      let spanArr = [];
      const keyArr = Object.keys(data[0]);
      for (const item of data) {
        for (let i = this.mergeConfig.colsRange[0]; i <= this.mergeConfig.colsRange[1]; i++) {
          if (i === 0) {
            spanArr.push(1);
            this.mergeConfig.position = 0;
          } else {
            if (item[keyArr[i - 1]] === item[keyArr[i]]) {
              spanArr.push(0);
              spanArr[this.mergeConfig.position] += 1;
            } else {
              spanArr.push(1);
              this.mergeConfig.position = i;
            }
          }
        }
        this.mergeConfig.colsArr.push(spanArr);
        spanArr = [];
      }
    },
    // 返回合并数组
    spanMethod({
      row, column, rowIndex, columnIndex,
    }) {
      if (this.mergeConfig.colsRange[0] <= columnIndex && columnIndex <= this.mergeConfig.colsRange[1]) {
        const _row = this.mergeConfig.rowsArr[columnIndex][rowIndex];
        const _col = this.mergeConfig.colsArr[rowIndex][columnIndex];
        console.log(_row, _col, "大幅扩大解放");
        return [_row, _col];
      }
    },
  },
};
</script>

<style scoped lang='scss'>
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 40px 0px;
  margin-top: 15px;
}
td,
th {
  width: 5%;
}
tr,
td,
th {
  height: 36px !important;
}
.hh {
  background: #51abab !important;
  color: #fff !important;
}
.date {
  display: inline-block;
  width: 88px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #707070;
  opacity: 0.4;
  border-radius: 4px;
}
.el-table.el-table--fit {
  margin: 10px 0;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border: none !important;
}
</style>
